<script setup>
import { onMounted, reactive, ref, watch } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import moduleApi from '@/api/system/ModuleApi'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false, //
  loading: false, // 加载开关
  childrenDrawer: false, // 选择图标开关
  parentOptions: [],
  actionOptions: [], // 操作
  //图标
  iconOptions: ['icon-dingyueguanli', 'icon-bangzhuzhongxin', 'icon-canshuguanli', 'icon-cainianguanli', 'icon-dingeguanli', 'icon-jindujihuabianzhi', 'icon-bizhongyuhuishuaiguanli', 'icon-gongzuopingtaiguanli', 'icon-fenxixitong', 'icon-gongzuoweituo', 'icon-jindujihuabiangeng', 'icon-gongyingshang', 'icon-kaohepingjiaguanli', 'icon-shujufenxipingtai', 'icon-zhongbiaojieguoguanli', 'icon-shujumoxingguanli', 'icon-jihuarenwuyinqing', 'icon-wenjianguiguanli', 'icon-shijifashengdengji', 'icon-shiqianchengpi', 'icon-yingyongguanlijishangdian', 'icon-xinwendongtai', 'icon-renyuanpeixunguanli', 'icon-zhuanxiangtiaozheng', 'icon-yusuanbianzhi', 'icon-zichanguanli', 'icon-zijinyueguanli', 'icon-guikouguanli', 'icon-shangjiguanli', 'icon-shoupiaoguanli', 'icon-yewushenpi', 'icon-bianhaoguizedingyi', 'icon-caigouxuqiu', 'icon-Exceltongyongdaoru', 'icon-gerenzhuyeguanli', 'icon-caigouleihetong', 'icon-jiekuanguanli', 'icon-laikuanguanli', 'icon-kaoqinguanli1', 'icon-yewujianmo1', 'icon-pingzhengguanli', 'icon-yewushenpi1', 'icon-shujubianbaoxitong', 'icon-kongjianxinxiguanli', 'icon-rizhiguanli', 'icon-shishizhinan', 'icon-zhibiaoguanli', 'icon-yunshuguanli', 'icon-wuliuguanli', 'icon-yinhangzhihangguanli']
  // iconOptions: Array.apply(null, { length: 81 }).map((_, index) => ({
  //   id: index,
  //   // 每 9 个为一组
  //   number: (index % 9) + 1,
  // }))
})
// 表单结构
const original = {
  id: null,
  parentId: 0, // 父ID parentId
  code: '', // 编码
  name: '', // 名称
  intro: '', // 简介说明
  type: '', // 类型
  auth: false, // 是否验证
  acts: [], // 操作
  icon: '', // 图标
  path: '', // 链接
  component: '', // 组件
  idx: 1 // 排序
}
// 表单数据
const formState = reactive({})

// 监听表单变化
watch(()=> formState.type, (newVal) => {
  // console.log('值发生了变更', newVal, oldVal)
  if(newVal == 'DIR') formState.component = 'DescPage'
},
//deep参数
//    默认是false,只有使用ref创建的响应式引用类型的数据是，才启用。才生效。
//immediate参数
//    默认是false,初始化的时候不执行回调函数。
//    如果是true,初始化的时候就会执行一次回调函数。
//flush参数:
//    默认是'pre',在dom渲染之前执行回调函数，如果有immediate：true时，回调函数有获取dom操作，则会报错，因为初始化时dom还没生成。
//    设置成'post'，则是在dom渲染完毕（监听的数据变更后dom渲染完毕）后，再执行回调函数。
{ deep: false, immediate: false, flush: 'pre' }
)

// 表单 处理
const { 
  onCancel, onFinish, InitializeData 
} = useFormEvent({state: state, remoteApi: moduleApi, formState: formState, original: original, formRef: formRef})
// 选中图标
const onSelectIcon = (key) => {
  formState.icon = key
  state.childrenDrawer = false
}

// 向父组件暴露方法和属性
defineExpose({ InitializeData })
// 加载页时初始化选项等基础数据
onMounted(() => {
  moduleApi.getTreeOptions().then(res => {
    state.parentOptions.push(res.data)
  })
  moduleApi.getActionOptions().then(res => {
    state.actionOptions = res.data
  })
})
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`模块管理`"
    placement="right"
    :width="'60%'"
  >
    <a-card draggable>
      <a-spin :spinning="state.loading">
        <!-- 表单内容 begin -->
        <a-form
          ref="formRef"
          :model="formState"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 10}"
          :scroll-to-first-error="true"
          :validate-on-rule-change="false"
          @finish="onFinish"
        >
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="所属模块" name="parentId" :label-col="{span:3}"
                :rules="[{ required: true, message: '请选择所属模块' }]">
                <a-tree-select
                  v-model:value="formState.parentId"
                  placeholder="所属模块" show-search allow-clear
                  tree-default-expand-all
                  :tree-data="state.parentOptions" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="名称" name="name" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入名称!' }]">
                <a-input
                  v-model:value="formState.name" placeholder="模块名称" show-count :minlength="2" :maxlength="20"
                  allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="标识" name="code" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入标识!' }]">
                <a-input
                  v-model:value="formState.code" show-count :minlength="2" :maxlength="20" allow-clear
                  placeholder="必须是唯一" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="类型" name="type" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入类型!' }]">
                <a-radio-group v-model:value="formState.type" button-style="solid">
                  <a-radio-button value="DIR">目录</a-radio-button>
                  <a-radio-button value="MENU">菜单</a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="是否授权" name="auth" :label-col="{span:3}"
                :rules="[{ required: true}]">
                <a-switch v-model:checked="formState.auth" checked-children="是" un-checked-children="否" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="路径" name="path" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入访问路径!' }]">
                <a-input v-model:value="formState.path" placeholder="访问路径" allow-clear show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="组件地址" name="component" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入组件地址!' }]">
                <a-input v-model:value="formState.component" allow-clear addon-before="/views" addon-after=".vue" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="排序" name="idx" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入排序!' }]">
                <a-input-number v-model:value="formState.idx" placeholder="排序" :min="0" :max="10" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="图标" name="icon" :label-col="{span:3}"
                :rules="[{ required: true, message: '请输入图标'}]">
                <a-input v-model:value="formState.icon" allow-clear>
                  <template #addonAfter>
                    <a-tooltip color="cyan" title="选择图标">
                      <ant-design-outlined @click="state.childrenDrawer = true" />
                    </a-tooltip>
                  </template>
                </a-input>
              </a-form-item>
            </a-col>

            <a-col :span="24">
              <a-form-item
                label="操作" name="acts" :label-col="{span:3}"
                :rules="[{ required: true, message: '请选操作项', type: 'array' }]">
                <a-checkbox-group v-model:value="formState.acts" :options="state.actionOptions" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item
                label="简介说明" name="intro" :label-col="{span:3}">
                <a-textarea v-model:value="formState.intro" placeholder="简介说明" allow-clear show-count />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item name="id">
                <a-space wrap>
                  <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                  <a-button size="large" block @click="onCancel">取消</a-button>
                  <a-input v-model:value="formState.id" type="hidden" />
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </a-card>
    <!-- 图标 -->
    <a-drawer
      v-model:visible="state.childrenDrawer"
      title="选择图标"
      width="500"
    >
      <a-card>
        <a-card-grid
          v-for="(item, idx) in state.iconOptions" :key="idx" 
          style="width: 20%; text-align: center; cursor: pointer;" 
          @click="onSelectIcon(item)">
          <d-icon-font :type="item" style="font-size: 24px" />
        </a-card-grid>
      </a-card>
    </a-drawer>
  </a-drawer>
</template>
